<template>
	<view class="register-box">
		<view class="register-header">
			<view class="back-icon" @click="goBack">
				<image src="/static/icon/left.svg" mode=""></image>
			</view>
		</view>
		<view class="register-title">
			<text>{{ t("forget.wjmm") }}</text>
		</view>
		<view class="register-subtitle syl">
			<text>{{ t("forget.rgyjwj") }}</text>
		</view>
		
		<view class="register-form">
			<u-form :model="formData" ref="uForm" errorType="message">
				<!-- 邮箱输入框 -->
				<view class="form-item" :class="{active:active=='email'}">
					<u-input
						v-model="formData.email"
						:placeholder="t('register.qsryx')"
						border="none"
						size="large"
						placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
						inputAlign="left"
						@blur="active=''"
						@focus="active='email'"
					>
						<template #prefix>
							<image class="input-icon" src="/static/icon/email-icon.svg"></image>
						</template>
					</u-input>
				</view>
				
				<!-- 验证码输入框 -->
				<view class="code-box">
					<view class="form-item captcha-item" :class="{active:active=='captcha'}">
						<u-input
							v-model="formData.captcha"
							:placeholder="t('register.qsryzm')"
							border="none"
							size="large"
							placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
							inputAlign="left"
							@blur="active=''"
							@focus="active='captcha'"
						>
							<template #prefix>
								<image class="input-icon" src="/static/icon/captcha-icon.svg"></image>
							</template>
						</u-input>
					</view>
					<!-- 发送验证码 -->
					<view class="send-btn" :class="{'counting': isCounting}" @click="sendCaptcha">
						{{ isCounting ? `${t('register.send')}(${countdown}s)` : btnText }}
					</view>
				</view>
				
				
				<!-- 密码输入框 -->
				<view class="form-item" :class="{active:active=='password'}">
					<u-input
						v-model="formData.password"
						:placeholder="t('register.qsrmm')"
						border="none"
						size="large"
						:password="!showPassword"
						placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
						inputAlign="left"
						@blur="active=''"
						@focus="active='password'"
					>
						<template #prefix>
							<image class="input-icon" src="/static/icon/password-icon.svg"></image>
						</template>
						<template #suffix>
							<image 
								class="password-icon" 
								:src="showPassword ? '/static/icon/eye-open.svg' : '/static/icon/eye-close.svg'"
								@click="togglePasswordVisibility"
							></image>
						</template>
					</u-input>
				</view>
				
				<!-- 确认密码输入框 -->
				<view class="form-item" :class="{active:active=='password2'}">
					<u-input
						v-model="formData.password2"
						:placeholder="t('register.qsrmm')"
						border="none"
						size="large"
						:password="!showPassword2"
						placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
						inputAlign="left"
						@blur="active=''"
						@focus="active='password2'"
					>
						<template #prefix>
							<image class="input-icon" src="/static/icon/password-icon.svg"></image>
						</template>
						<template #suffix>
							<image 
								class="password-icon" 
								:src="showPassword2 ? '/static/icon/eye-open.svg' : '/static/icon/eye-close.svg'"
								@click="togglePasswordVisibility2"
							></image>
						</template>
					</u-input>
				</view>
			</u-form>
		</view>
		
		<view class="bottom-box">
			<!-- 创建账户按钮 -->
			<view class="register-btn btn-primary" @click="submitForm">
				{{ t('forget.qrcz') }}
			</view>
		</view>
		<GlobalPopup ref="popup"></GlobalPopup>
	</view>
</template>

<script setup>
import { ref, reactive, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
const popup = ref()
const { t } = useI18n();
const active = ref("")
const isCounting = ref(false);
const btnText = ref(t('register.fsyzm'))
const countdown = ref(60);
let timer = null; // 定时器

// 表单数据
const formData = reactive({
	email: '1',
	captcha: '1',
	password: '1',
	password2: '1',
});

// 密码显示控制
const showPassword = ref(false);
const togglePasswordVisibility = () => {
	showPassword.value = !showPassword.value;
};

// 密码显示控制
const showPassword2 = ref(false);
const togglePasswordVisibility2 = () => {
	showPassword2.value = !showPassword2.value;
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 发送验证码
const sendCaptcha = () => {
	// 如果正在倒计时中，不允许再次发送
	if (isCounting.value) {
		return;
	}
	
	if (!formData.email) {
		popup.value.open({
			title: t('register.qsryx'),
			loading: false
		});
		return;
	}
	
	// 发送验证码逻辑
	
	// 开始倒计时
	isCounting.value = true;
	countdown.value = 60;
	
	// 清除可能存在的旧定时器
	if (timer) {
		clearInterval(timer);
	}
	
	timer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			// 倒计时结束
			clearInterval(timer);
			timer = null;
			isCounting.value = false;
			countdown.value = 60;
			// 修改按钮文字为"重新发送"
			btnText.value = t('register.cxfs')
		}
	}, 1000);
};

// 提交表单
const submitForm = async () => {
	if (!formData.email) {
		popup.value.open({
			title: t('register.qsryx'),
			loading: false
		});
		
		return;
	}
	if (!formData.captcha) {
		popup.value.open({
			title: t('register.qsryzm'),
			loading: false
		});
		return;
	}
	if (!formData.password) {
		popup.value.open({
			title: t('forget.qsrxmm'),
			loading: false
		});
		return;
	}
	
	if (!formData.password2) {
		popup.value.open({
			title: t('forget.qzcsrmm'),
			loading: false
		});
		return;
	}
	
	if (formData.password!=formData.password2) {
		popup.value.open({
			title: t('forget.mmbyz'),
			content:t('forget.qcxsr'),
			loading: false,
			warning:true
		});
		return;
	}
	
	// 提交注册信息
	console.log('提交注册信息', formData);
	// 这里添加注册逻辑
	// // 重置成功
	// popup.value.open({
	// 	title: t('forget.czcg'),
	// 	content: t('register.zzdl')
	// })
	// // 验证码错误
	// popup.value.open({
	// 	title: t('forget.yzmcw'),
	// 	content: t('forget.zzfh')
	// })
	// 邮箱未注册
	popup.value.open({
		title: t('forget.yxwzc'),
		content: t('forget.qwzc')
	})
};

// 跳转到登录页面
const goToLogin = () => {
	uni.navigateTo({
		url: '/pages/account/login'
	});
};

// 组件卸载时清除定时器
onUnmounted(() => {
	if (timer) {
		clearInterval(timer);
		timer = null;
	}
});
</script>

<style lang="scss">
	.bottom-box{
		padding:0 0 160rpx;
		margin-top: 20vh;
	}
.register-box {
	padding: 0 40rpx;
	height: 100vh;
	background-color: #fff;
	
	.register-header {
		padding-top: 88rpx;
		display: flex;
		align-items: center;
		
		.back-icon {
			width: 69.77rpx;
			height: 69.77rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 17.44rpx;
			border: 1.74rpx solid #EFF6FF;
			
			image {
				width: 10.47rpx;
				height: 20.93rpx;
			}
		}
	}
	
	.register-title {
		margin: 60rpx 32rpx 0;
		font-size: 48rpx;
		color: #000000;
		font-weight: 500;
		line-height: 1.2;
	}
	
	.register-subtitle {
		margin: 22.65rpx 32rpx 0;
		font-size: 28rpx;
		color: #6C727F;
		margin-bottom: 60.98rpx;
	}
	
	.register-form {
		margin:  0 32rpx;
		.code-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.send-btn{
				flex: 1;
				width: 200.58rpx;
				line-height: 97.67rpx;
				border-radius: 27.91rpx;
				background: #0278DC;
				font-size: 27.91rpx;
				font-weight: 400;
				color: #fff;
				margin-bottom: 27.87rpx;
				margin-left: 33.1rpx;
				text-align: center;
				transition: all 0.3s;
				
				&.counting {
					background: rgba(2, 120, 220, 0.5)
				}
			}
			.form-item{
				flex: 1;
			}
		}
		.form-item {
			margin-bottom: 27.87rpx;
			border-radius: 27.91rpx;
			background: rgba(249, 250, 251, 1);
			padding: 24rpx 60.2rpx;
			border: 1px solid transparent;
			height: 100rpx;
			box-sizing: border-box;
			.input-icon {
				width: 41.86rpx;
				height: 41.86rpx;
				margin-right: 26rpx;
				transform: translateY(4px);
			}
			:deep(.uni-input-wrapper) {
				font-size: 28rpx;
				color: #121826;
				font-family: "SYL";
			}
			:deep(.u-input__content__subfix-password-shower) span{
				display: none;
			}
			.password-icon {
				width: 44rpx;
				height: 44rpx;
			}
			&.active{
				border: 1.74rpx solid rgba(59, 130, 246, 1);
			}
		}
		
		.captcha-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.u-input {
				flex: 1;
			}
			
			.captcha-btn {
				background: linear-gradient(90deg, #00E1B4 0%, #0278DC 100%);
				color: #fff;
				border-radius: 16rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				box-sizing: border-box;
				box-shadow: 0 5rpx 10rpx rgba(2, 120, 220, 0.2);
			}
		}
		
		.agreement-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 30rpx;
			margin-bottom: 80rpx;
			padding-left: 10rpx;
			.check-box{
				width: 41.86rpx;
				height: 41.86rpx;
				border-radius: 13.95rpx;
				border: 1.74rpx solid #D3D5DA;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 14rpx;
				&.active{
					border: 1.74rpx solid #3B82F6;
					background-color: #3B82F6;
					.icon{
						display: block;
					}
				}
				.icon{
					width: 22.38rpx;
					height: 15.56rpx;
				}
			}
			.agreement-text {
				font-size: 24rpx;
				color: #394150;
				line-height: 1.5;
			}
			
			.agreement-link {
				font-size: 24rpx;
				color: #0278DC;
				line-height: 1.5;
			}
		}
	}
	
	.register-btn {
		width: 570.35rpx;
		height: 97.67rpx;
		border-radius: 26.16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		margin: 60rpx auto 0;
	}
	
	.login-link {
		margin-top: 15.68rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 40.41rpx;
		font-size: 27.91rpx;
		font-weight: 400;
		color:#9EA3AE;
		
		.login-text {
			color: #0278DC;
			margin-left: 6rpx;
		}
	}
}
</style>